<template>
  <nuxt-link
    class="flex w-[220px] group relative pb-4 rounded-t-lg"
    external
    :to="$localePath(`/goods/${discountGoodsInfo.goodsSku?.goods?.urlName || discountGoodsInfo.goodsSku?.goods?.id}`)">
    <!-- 折扣率 -->
    <p class="absolute right-0 top-3 bg-[#15AA7F] rounded-l-1 px-2 text-sm text-center py-0.5">
      - {{ discountGoodsInfo.goodsSku?.discount }}%
    </p>
    <div class="mx-auto h-[220px] rounded-t-lg overflow-hidden">
      <y-image
        class="h-full w-full object-cover rounded-t-lg group-hover:scale-110 transition-all duration-200"
        :src="$withPicOrigin(discountGoodsInfo.goodsSku?.goods?.smallIcon)"
        :alt="discountGoodsInfo.goodsSku?.name"
        height="220px" />
    </div>
    <section
      class="px-4 shadow-md shadow-black-light flex-1 pt-20 pb-5 rounded-b-lg -mt-20 bg-gradient-to-b from-[rgba(0,0,0,0.05)] to-[rgba(0,0,0,0.5)]">
      <h3 class="group-hover:underline h-12 flex items-center mt-0.5 text-base text-white1 leading-6">
        <span class="line-clamp-2">{{ discountGoodsInfo.goodsSku?.goods?.name }}</span>
      </h3>
      <div class="flex w-full item-center justify-between text-sm text-[#fff]">
        <p class="text-red1 whitespace-nowrap font-bold">
          {{ $calcPrice(discountGoodsInfo.goodsSku?.price) }}
        </p>
        <p class="text-[rgba(255,255,255,0.4)] whitespace-nowrap line-through">
          {{ $calcPrice(discountGoodsInfo.goodsSku?.originalPrice) }}
        </p>
      </div>
    </section>
  </nuxt-link>
</template>

<script setup lang="ts">
import YImage from '~/components/logic/YImage.vue'

const props = defineProps<{
  discountGoodsInfo: any
}>()
</script>

<style lang="scss"></style>
